<template>
	<view :style="{'width':sysWidth+'px'}">
		<view class="long-data-title" v-show="showTitbar">
			<text class="long-data-title-text">{{dateTime}}</text>
			<image @click="cancel" class="long-data-title-cancel" src="/static/images/others/cancel.png" mode=""></image>
		</view>
		<view class="long-data-picker" >
			<picker-view :indicator-style="itemHeight" @change="bindDateChange" :value="valieList">
				<picker-view-column>
					<view class="long-datetime-item" v-for="(item,index) in dates" :key="index">{{item.text}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="flex long-data-btn padding-bottom" style="justify-content: space-evenly">
			<view class="om-bg-light" @click="cancel">取消</view>
			<view class="om-bg" @click="confirm">确定</view>
		</view>
	</view>

</template>

<script>
	import moment from '@/static/js/moment.js'
	export default {
		name: "OmDate",
		props: {
			chooseNum:{
				type:Number,
				default:30
			},
			//分钟间隔
			interval:{
				type:Number,
				default:5
			},
			dateTimeEditor:{
				type:Object,
				default:{}
			},
			datetime:{
				type:String,
				default:''
			},
			minDate:{
				type:String,
				default:''
			},
			showTitbar:{
				type: Boolean,
				default: true
			},
		},
		data() {
			let currentdate = moment().format("MMM Do");
			//设置日期数组
			let dates = []
			//格式化日期数组
			let formatdates = []
			let valieList = [0,0,0]
			let startTime = moment().subtract(1, 'months').format('YYYY-MM-DD');
			let endTime = moment().add(6,'months').format('YYYY-MM-DD')
			let days =  moment(endTime).diff(moment(startTime), 'days') // 1
			let preNum = moment(startTime).diff(moment(), 'days')
			
			let dateStr = ''
			if(this.minDate){
				dateStr = this.minDate
			}
			if(this.datetime){
				dateStr = this.datetime
			}
			
			for (let i = 0; i <= (days+ Math.abs(preNum)); i++) {
				let value = moment().add((preNum+i), 'days').format("YYYY-MM-DD")
				formatdates.push(value)
				let month = moment().add((preNum+i), 'days').format("MM")+'月'
				let day = moment().add((preNum+i), 'days').format("DD")+'日'
				let num = moment().add((preNum+i), 'days').day()
				let weekDay = '周'+ this.getDay(num)
				if(value == moment().format('YYYY-MM-DD')){
					dates.push({
						value:value,
						text:'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + '今天'+ '\xa0' + weekDay
					})
				}else{
					dates.push({
						value:value,
						text:month+day+'\xa0'+ weekDay
					})
				}
				if(dateStr){
					if(value == dateStr){
						valieList[0] = i
					}
				}else{
					if(value == moment().format('YYYY-MM-DD')){
						valieList[0] = i
					}
				}
			}
			return {
				itemHeight: `height: ${uni.upx2px(88)}px;`,
				dates: dates,
				formatdates:formatdates,
				valieList:valieList,
				sysWidth:0,
				dateTime:this.datetime?this.datetime: (this.minDate?this.minDate:moment().format('YYYY-MM-DD')) 
			};
		},
		computed: {
			//自动计算当前时间
			currentdateindex:function(nv){
				console.log(nv)
				if(nv==0){
					this.hours = []
					for (let i = 0; i < 24; i++) {
						let str = i;
						if (i < 10) {
							str = '0' + str;
						} else {
							str = '' + str;
						}
						this.hours.push(str);
					}
					this.minutes = []
					for (let i = 0; i < 60; i++) {
						let str = i;
						if (i < 10) {
							str = '0' + str;
						} else {
							str = '' + str;
						}
						this.minutes.push(str);
					}
				}
			}
		},
		mounted() {
			uni.getSystemInfo({
				success:(res)=>{
					this.sysWidth = res.screenWidth
				}
			})
			this.initDate();
		},
		methods: {
			//确定按钮点击事件
			confirm(){
				this.$emit('confirm',this.dateTimeEditor,this.dateTime)
			},
			//取消按钮和图标点击事件
			cancel(){
				this.$emit('cancel',this.dateTimeEditor)
			},
			getDay(num){
				switch(num){
					case 0 :
					return '日';
					case 1 :
					return '一';
					case 2 :
					return '二';
					case 3 :
					return '三';
					case 4 :
					return '四';
					case 5 :
					return '五';
					case 6 :
					return '六';
				}
			},
			//初始化时间
			initDate() {
				
			},
			//滚动切换时间
			bindDateChange(e) { //有效日期的滚动日期时间方法
				let valueArr = e.detail.value
				let dateStr = this.formatdates[valueArr[0]];
				this.dateTime = dateStr
			}
		},
	}
</script>

<style>
	.long-data {
		margin-top: 30rpx;
		height: 80rpx;
		background: #FFFFFF;
		line-height: 80rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		/* position: relative; */
	}

	.long-data-check {
		height: 40rpx;
		width: 100%;
		background: #e54d42;
		position: absolute;
		left: 0;
		top: 18rpx;
		color: #fff;
		line-height: 45rpx;
		border-radius: 0rpx;
		padding: 0px 20rpx;
		font-size: 20rpx;
		text-align: center;
		border-radius: 20rpx;

	}

	.long-data-check-triangle {
		width: 0;
		height: 0;
		border-top: 12rpx solid transparent;
		border-left: 10rpx solid #e54d42;
		border-bottom: 12rpx solid transparent;
		position: absolute;
		right: 223rpx;
		top: 26rpx;


	}


	.long-data-fl {
		float: left;
	}

	.long-data-fr {
		float: right;
	}

	.long-data-changeTime {
		color: #888;
		font-size: 25rpx;
		position: relative;
		text-align: right;
		padding: 0rpx 20rpx;
	}

	.long-data-changeTimeIcon {
		color: #888;
	}
	.long-data-title{
		position: relative;
		width: 100%;
		height: 90rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.long-data-picker {
		width: 100%;
		height: 500rpx;
		overflow: hidden;
		border-top: 1px solid #cbcbcb;
		background: #fff;
		transition: height 0.3s;
	}

	.long-datetime-item {
		text-align: center;
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 34upx;
	}
	.long-data-picker picker-view {
		height: 100%;
	}
	.long-data-title-text{
		margin-left: 30rpx;
		font-weight:400;
		font-size: 15px;
	}
	.long-data-title-cancel{
		position: absolute;
		right: 30rpx;
		width:30rpx;
		height: 30rpx;
	}
	.long-data-btn{
		background: #fff;
	}
	.long-data-btn view{
		width: 45%;height: 80rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		font-size: 16px;
	}
</style>
